<div class="tile m-l-10 m-r-10 embed__vis" data-test="VisualizationEmbed">
  <div class="embed-heading p-t-10 p-b-10 p-r-15 p-l-15">
    <h3>
      <img ng-src="{{$ctrl.logoUrl}}" style="height: 24px;"/>
      <visualization-name visualization="$ctrl.visualization"/>
      {{$ctrl.query.name}}

      <small ng-if="$ctrl.showQueryDescription">
        <div class="text-muted" ng-bind-html="$ctrl.query.description | markdown"></div>
      </small>
    </h3>
  </div>

  <div class="col-md-12 query__vis">
    <div class="p-t-15 p-b-5" ng-if="$ctrl.query.hasParameters()">
      <parameters parameters="$ctrl.query.getParametersDefs()" on-values-change="$ctrl.refreshQueryResults"></parameters>
    </div>

    <div ng-if="$ctrl.error">
      <div class="alert alert-danger" data-test="ErrorMessage">Error: {{$ctrl.error}}</div>
    </div>

    <visualization-renderer visualization="$ctrl.visualization" query-result="$ctrl.queryResult" class="t-body" ng-if="$ctrl.queryResult">
    </visualization-renderer>
  </div>

  <div class="clearfix tile__bottom-control">
    <div class="row">
      <div class="col-xs-6">
        <a class="small hidden-print" ng-click="$ctrl.refreshQueryResults()">
          <i ng-class='{"zmdi-hc-spin": $ctrl.loading}' class="zmdi zmdi-refresh"></i>
          <span am-time-ago="$ctrl.queryResult.getUpdatedAt()" ng-if="!$ctrl.loading"></span>
          <rd-timer from="$ctrl.refreshStartedAt" ng-if="$ctrl.loading"></rd-timer>
        </a>
      </div>
      <span class="small visible-print"><i class="zmdi zmdi-time-restore"></i> {{$ctrl.queryResult.getUpdatedAt() | dateTime}} UTC</span>
      <div class="col-xs-6 text-right hidden-print">
        <a class="btn btn-default btn-sm" ng-href="{{$ctrl.query.getUrl()}}" target="_blank" tooltip="Open in Redash">
          <span class="zmdi zmdi-link"></span>
        </a>

        <div class="btn-group dropup" uib-dropdown ng-if="!$ctrl.query.hasParameters()">
          <button type="button" class="btn btn-default btn-sm dropdown-toggle" aria-haspopup="true" uib-dropdown-toggle
                  aria-expanded="false">
            Download Dataset <span class="caret"></span>
          </button>
          <ul class="dropdown-menu pull-right" uib-dropdown-menu>
            <li>
              <a ng-href="{{$ctrl.queryResult.getLink($ctrl.query.id, 'csv', $ctrl.apiKey)}}" download="{{$ctrl.queryResult.getName($ctrl.query.name, 'csv')}}" target="_self">
                <span class="fa fa-file-o"></span> Download as CSV File
              </a>
            </li>
            <li>
              <a ng-href="{{$ctrl.queryResult.getLink($ctrl.query.id, 'xlsx', $ctrl.apiKey)}}" download="{{$ctrl.queryResult.getName($ctrl.query.name, 'xlsx')}}"  target="_self">
                <span class="fa fa-file-excel-o"></span> Download as Excel File
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
